<!-- 层级更高的模态框，可以叠加到另一个模态框上面 -->
<template>
    <view v-if="visible" class="modal-mask">
        <view class="modal-box">
            <view class="modal-title">{{ title }}</view>

            <!-- 输入框组 -->
            <view v-for="(item, index) in inputs" :key="'input-' + index" class="modal-input-group">
                <label class="label">
                    {{ item.label }}
                    <text v-if="item.required" class="required redColor">*</text>
                </label>
                <uni-easyinput v-model="item.value" :type="item.type || 'text'"
                    :placeholder="item.placeholder || '请输入内容'" />
            </view>

            <!-- 单选框组 -->
            <view v-for="(radio, index) in radios" :key="'radio-' + index" class="modal-radio-group">
                <label class="label">{{ radio.label }} <text v-if="radio.required"
                        class="required redColor">*</text></label>
                <view class="radio-options">
                    <radio-group @change="(e) => handleRadioChange(e, index)">
                        <label v-for="(option, i) in radio.options" :key="'option-' + index + '-' + i">
                            <radio class="radio" :value="option.value" :checked="radio.value === option.value">
                                {{ option.label }}
                            </radio>
                        </label>
                    </radio-group>
                </view>
            </view>

            <!-- 下拉框组 -->
            <view v-for="(select, index) in selects" :key="'select-' + index" class="modal-input-group">
                <label class="label">
                    {{ select.label }}
                    <text v-if="select.required" class="required redColor">*</text>
                </label>
                <!-- 使用 uni-data-select 替代 select，uniapp没有select标签 -->
                <uni-data-select v-model="select.value" :localdata="select.range"
                    @change="handleSelectChange(index)"></uni-data-select>
            </view>

            <!-- 错误提示 -->
            <view class="error-message redColor" v-if="error">{{ error }}</view>

            <!-- 操作按钮 -->
            <view class="modal-actions">
                <button size="mini" @click="onCancel">取消</button>
                <button size="mini" type="primary" @click="onConfirm">确定</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";

const props = defineProps({
    visible: { type: Boolean, default: false },
    title: { type: String, default: "请输入" },
    // 输入框组
    inputs: {
        type: Array,
        default: () => [],
        // 示例: [{ label: "字段名", value: "", type: 'text', required: true, placeholder: "提示内容" }]
    },
    // 下拉框组
    selects: {
        type: Array,
        default: () => [],
        // 示例: [{ label: '选择项', value: '', required: true, range: [{ text: '选项1', value: '1' }, { text: '选项2', value: '2' }] }]
    },
    // 单选框组
    radios: {
        type: Array,
        default: () => [],
        // 示例: [{ label: "选择项", value: "", required: true, options: [{ label: "选项1", value: "1" }, { label: "选项2", value: "2" }] }]
    },
});
// 下拉框选择变更：
const handleSelectChange = (index) => {
    console.log(`下拉框选择变更：`, props.selects[index].value);
};
const emit = defineEmits(["cancel", "confirm",]);
const error = ref("");
const handleRadioChange = (e, index) => {
    props.radios[index].value = e.detail.value; // 更新对应单选框的值
};
const onCancel = () => {
    error.value = "";
    emit("cancel");
};
const onConfirm = () => {
    // 校验输入框必填项
    for (const item of props.inputs) {
        const value = item.value;
        if (item.required) {
            if (typeof value === 'string' && !value.trim()) {
                error.value = `${item.label}不能为空`;
                return;
            }
            if (typeof value === 'number' && isNaN(value)) {
                error.value = `${item.label}必须为有效数字`;
                return;
            }
            if (value == null) { // 防止其他类型或空值
                error.value = `${item.label}不能为空`;
                return;
            }
        }
    }

    // 校验单选框组必填项
    for (const radio of props.radios) {
        // 检查 value 是否为 null 或 undefined，0、1、true、false 都是有效值
        if (radio.required && (radio.value === null || radio.value === undefined)) {
            error.value = `${radio.label}未选择`;
            return;
        }
    }

    // 校验下拉框组必选项
    for (const select of props.selects) {
        if (select.required && (select.value === null || select.value === undefined || select.value === '')) {
            error.value = `${select.label}未选择`;
            return;
        }
    }

    error.value = "";
    const result = {
        inputs: props.inputs.map((item) => ({ label: item.label, value: item.type && item.type === 'number' ? Number(item.value) : item.value })),
        radios: props.radios.map((radio) => ({ label: radio.label, value: radio.value })),
        selects: props.selects.map(select => ({ label: select.label, value: select.value })),
    };
    emit("confirm", result);
};
</script>

<style scoped lang="scss">
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-box {
    overflow-y: auto;
    max-height: 90vh;
    width: 80%;
    background: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    /* overflow-y: scroll; */
}

.modal-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.modal-input-group,
.modal-radio-group {
    margin-bottom: 15px;
    text-align: left;
}

.modal-input-group .label,
.modal-radio-group .label {
    display: block;
    margin-bottom: 5px;
}

.modal-radio-group .radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modal-radio-group .radio-options .radio {
    margin-right: 10px;
}

.modal-input-group .required {
    margin-left: 5px;
}

.modal-actions {
    display: flex;
    justify-content: space-around;
}

.error-message {
    margin-bottom: 10px;
    text-align: left;
}

.redColor {
    color: red;
}
</style>
